<template>
	<view>
		<!-- 搜索框 -->
		<view class="inputContainer">
			<uni-search-bar
				placeholder="请输入搜索内容"
				radius="100"
				cancelButton="none"
				focus
				@input="searchInput"
				@confirm="searchConfirm"
			>
			</uni-search-bar>
		</view>

		<!-- 搜索建议列表 -->
		<view class="adviceContainer">
			<view
				class="adviceItem"
				v-for="item in adviceList"
				:key="item.goods_id"
				@click="goToDetails(item.goods_id)"
				v-if="adviceList && adviceList.length !== 0"
			>
				<view class="adviceContent">{{ item.goods_name }}</view>
			</view>
			<view class="emptyAdvice" v-if="adviceList && adviceList.length === 0"> ——<text>暂无搜索关联</text>—— </view>
		</view>

		<!-- 搜索历史 -->
		<view class="historyContainer" v-if="historyList.length !== 0 && !adviceList">
			<!-- 标题区域 -->
			<view class="historyTitle">
				<text>搜索历史</text>
				<!-- 清空历史图标 -->
				<uni-icons type="trash" size="17" @click="clearHistory"></uni-icons>
			</view>
			<!-- 历史列表 -->
			<view class="historyList">
				<uni-tag
					v-for="(item, index) in historyList"
					:key="index"
					:text="item"
					inverted
					@click="goToGoodslist(item)"
				></uni-tag>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			timerID: null, // 延时器Id
			keyword: '', // 搜索关键词
			adviceList: null, // 搜索建议
			historyList: [] //历史记录
		}
	},
	onLoad() {
		// 读取本地存储搜索历史记录
		this.historyList = JSON.parse(uni.getStorageSync('searchKeyword') || '[]')
	},
	methods: {
		// 搜索框输入事件回调
		searchInput(e) {
			// 清除timerID对应的延时器
			clearTimeout(this.timerID)
			// 设定延时器并将返回值赋值给timerID
			this.timerID = setTimeout(() => {
				// 若500毫秒内未触发新的输入事件，保存输入值到本地
				this.keyword = e
				// 调用搜索建议数据请求函数
				this.getAdviceList()
			}, 500)
		},

		// 搜索框确认事件回调
		searchConfirm(e) {
			// 确认搜索后进行导航跳转，并将输入内容作为路径参数
			uni.navigateTo({
				url: '/subGoods/goodslist/goodslist?query=' + e.value
			})
			// 关键词查重：1.将历史记录数组转换为Set对象
			const historySet = new Set(this.historyList)
			// 2.往Set对象添加新历史记录
			historySet.add(e.value)
			// 3.将Set对象转换回数组，同时颠倒数组顺序
			this.historyList = Array.from(historySet).reverse()
			// 将搜索历史保存至本地存储
			uni.setStorageSync('searchKeyword', JSON.stringify(this.historyList))
		},

		// 定义搜索建议数据请求函数
		async getAdviceList() {
			// 输入值为空直接退出，并将之前请求返回的数组赋值为空
			if (this.keyword.length === 0) return (this.adviceList = null)
			const { data } = await uni.$http.get('/api/public/v1/goods/qsearch', { query: this.keyword })
			// 请求成功则保存搜索建议数组（无搜索结果返回空数组），否则提示请求失败
			return data.meta.status === 200 ? (this.adviceList = data.message) : uni.$showMsg('搜索失败！')
		},

		// 监听每个搜索建议项的点击事件
		goToDetails(id) {
			// 使用编程式导航跳转至商品详情页
			uni.navigateTo({
				url: '/subGoods/details/details?goods_id=' + id
			})
		},

		// 清空搜索历史
		clearHistory() {
			uni.showModal({
				title: '确认删除全部历史记录？',
				success: res => {
					if (res.confirm) {
						this.historyList = []
						uni.setStorageSync('searchKeyword', '[]')
					}
				}
			})
		},

		// 监听每个搜索历史标签点击事件
		goToGoodslist(keyword) {
			// 使用编程式导航跳转至商品列表页
			uni.navigateTo({
				url: '/subGoods/goodslist/goodslist?query=' + keyword
			})
		}
	}
}
</script>

<style lang="scss">
// 搜索框
.inputContainer {
	position: sticky;
	top: 0;
	z-index: 999;
	background-color: #c00000;
}
// 搜索建议
.adviceContainer {
	.adviceItem {
		padding: 13px 15px;
		font-size: 12px;
		border-bottom: 1px solid #efefef;

		.adviceContent {
			margin-right: 3px;
			white-space: nowrap; // 文字不允许换行（单行文本）
			overflow: hidden; // 溢出部分隐藏
			text-overflow: ellipsis; // 文本溢出后，使用 ... 代替
		}
	}
	// 暂无搜索建议
	.emptyAdvice {
		padding: 10px 0;
		color: gray;
		text-align: center;
		text {
			padding: 0 10px;
		}
	}
}

// 搜索历史
.historyContainer {
	padding: 0 15px;

	.historyTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 35px;
		font-size: 13px;
		border-bottom: 1px solid #efefef;
	}

	.historyList {
		display: flex;
		flex-wrap: wrap;

		.uni-tag {
			display: block;
			margin: 5px 5px 0 0;
			color: #000;
		}
	}
}
</style>
